<template>
    <div class="indexcontent">
        <pageHeader ref="header" :showRoof="false" :isLoginPage="true"></pageHeader>
        <div class="section forgetsection">
            <div class="section-main forgetsectionmain">
                <div class=" forgetsection-tl">
                    <div>设置新登录密码</div>
                    <div class="step-wrap">
                        <div class="clearfix step">
                            <div class="step-item step-first" :class="[stepActive>0?'step-active':'']">
                                <div class="step-num">1</div>
                                <div class="step-line"></div>
                                <div class="step-words">身份验证</div>
                            </div>
                            <div class="step-item step-defaultitem" :class="[stepActive>1?'step-active':'']">
                                <div class="step-num">2</div>
                                <div class="step-line"></div>
                                <div class="step-words">设置新密码</div>
                            </div>
                            <div class="step-item step-last" :class="[stepActive>2?'step-active':'']">
                                <div class="step-num">
                                    <img src="@/assets/images/u281.png" alt="" v-if="stepActive<=2">
                                    <img src="@/assets/images/u281_selected.png" alt="" v-else>
                                </div>
                                <div class="step-line"></div>
                                <div class="step-words">完成</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="forgetsection-bd">
                    <swiper :options="swiperOption" ref="mySwiper">
                        <!-- slides -->
                        <!--<swiper-slide><img :src="bannerList[0].imgPath" alt="" style="width: 100%;display: block;">-->
                        <!--</swiper-slide>-->
                        <swiper-slide class="swiper-no-swiping">
                            <div class="forgetsection-stepone">
                                <div class="stepone-phone">已绑定的手机号：189****1688</div>
                                <div class="stepone-inp">
                                    <div class="loginpage-inpgroup">
                                        <img src="@/assets/images/login-icon3.png" alt="" class="inpicon"
                                             style="width: 26px;margin-top: -13px;">
                                        <input type="text" placeholder="短信验证码">
                                        <button type="button" class="getcode" :class="[readyget?'ungetcode':'']"
                                                @click="tapGetCode">
                                            {{codeWords}}
                                        </button>
                                        <div class="reg-errcode"><img src="@/assets/images/login-icon4.png" alt="">已发送，请查收手机短信
                                        </div>
                                        <div class="reg-err"><img src="@/assets/images/erricon.png" alt="">{{codeErr}}
                                        </div>
                                    </div>
                                </div>
                                <div class="stepone-btn">
                                    <button type="button" @click="toStepTwo">下一步</button>
                                </div>
                            </div>
                        </swiper-slide>
                        <swiper-slide class="swiper-no-swiping">
                            <div class="forgetsection-steptwo">
                                <div class="loginpage-inpgroup">
                                    <img src="@/assets/images/login-icon2.png" alt="" class="inpicon">
                                    <input type="text" placeholder="设置6-18位登录密码">
                                    <div class="reg-err"><img src="@/assets/images/erricon.png" alt="">{{passwordErr}}
                                    </div>
                                </div>
                                <div class="loginpage-inpgroup">
                                    <img src="@/assets/images/login-icon2.png" alt="" class="inpicon">
                                    <input type="text" placeholder="重复输入6-18位登录密码">
                                    <div class="reg-err"><img src="@/assets/images/erricon.png" alt="">{{passwordErr}}
                                    </div>
                                </div>
                                <div class="stepone-btn">
                                    <button type="button" @click="toStepThree">确定</button>
                                </div>
                            </div>
                        </swiper-slide>
                        <swiper-slide class="swiper-no-swiping">
                            <div class="forgetsection-stepthree">
                                <img src="@/assets/images/u1009.png" alt="" class="stepthree-img">
                                <div class="stepthree-words">恭喜你，新的登陆密码设置成功</div>
                                <div class="stepthree-tips">点击下方按钮，或 <span>{{routerTime}}</span> 秒后自动返回</div>
                                <div class="stepone-btn">
                                    <router-link tag="button" :to="{name:'Login'}" type="button">立即登录</router-link>
                                </div>
                            </div>
                        </swiper-slide>
                        <!--                        <swiper-slide v-for="(item,index) in bannerList" :key="index" class="swiper-no-swiping">-->
                        <!--                            ssssss{{item}}-->
                        <!--                        </swiper-slide>-->
                        <!-- Optional controls -->
                        <!--                        <div class="swiper-pagination" slot="pagination"></div>-->
                    </swiper>
                </div>
                <div class="forgetsection-ft"></div>
            </div>
        </div>
        <pageFooter/>
    </div>
</template>

<script>
    import pageHeader from '@/components/pageHeader'
    import pageFooter from '@/components/pageFooter'

    import {mapMutations} from 'vuex'

    let timeInterval = null;
    let routerInterval = null;
    export default {
        name: 'forgetpass',
        components: {
            pageHeader,
            pageFooter
        },
        data() {
            return {
                swiperOption: {
                    autoplay: false,
                    loop: false,
                    noSwiping: true,
                    // pagination: '.swiper-pagination'
                },
                bannerList: [1, 2, 3, 4, 5],
                codeErr: '验证码错误',
                readyget: false,
                codeWords: '获取验证码',
                passwordErr: '密码输入有误',
                time: 10,
                routerTime: 5,
                stepActive: 1,
            }
        },
        created() {

        },
        computed: {
            swiper() {
                return this.$refs.mySwiper.swiper;
            }
        },

        mounted() {

        },
        beforeDestroy() {
            clearInterval(timeInterval)
            clearInterval(routerInterval)
        },
        methods: {
            tapGetCode() {
                if (!this.readyget) {
                    timeInterval = setInterval(() => {
                        if (this.time > 0) {
                            this.readyget = true;
                            this.time = this.time - 1;
                            this.codeWords = this.time + '秒后可重发'
                            console.log(this.time)
                        } else {
                            clearInterval(timeInterval)
                            this.time = 10;
                            this.codeWords = '获取验证码'
                            this.readyget = false;
                        }
                    }, 1000)
                }
            },
            toStepTwo() {
                this.swiper.slideTo(1, 1000, false)
                this.stepActive = 2
            },
            toStepThree() {
                this.swiper.slideTo(2, 1000, false)
                this.stepActive = 3
                // routerInterval = setInterval(() => {
                //     if (this.routerTime > 0) {
                //         this.routerTime = this.routerTime - 1;
                //     } else {
                //         clearInterval(timeInterval)
                //         this.$router.push({
                //             name:'Login'
                //         })
                //     }
                // }, 1000)
            }
        }
    }
</script>

<style scoped>

</style>
